<template>
	<view class="content">
		<view class="content-top-bg" :style="{'backgroundColor': vdata.primaryColor}"></view>
		<view class="tips">
			<view class="tips-title" :style="{'color': vdata.primaryColor}">欢迎使用Jeepay收银台</view>
			<view class="tips-image"><image src="/static/img/scan.svg"></image></view>
			<!-- #ifdef H5 -->
				<view class="tips-content">
					<text>请使用手机</text>
					<text>扫描Jeepay收款码进入</text>
				</view>
			<!-- #endif -->
			
			<!-- #ifdef MP-ALIPAY || MP-WEIXIN -->
				<button class="scan-btn" hover-class="scan-btn-hover" :style="{'backgroundColor': vdata.primaryColor}" @click="scanQrcFunc">扫码买单</button>
			<!-- #endif -->
		</view>
		<!-- <view
			v-if="appConfig.currentPageType != appConfig.PAGE_TYPE_ENUM.OTHER_H5"
			class="payment-no-keyboard"
			:style="{'backgroundColor': vdata.primaryColor}"
			@tap="pay">
			跳转至测试付款页
		</view> -->
	</view>
</template>

<script setup >
import { reactive } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import theme from '@/config/theme.js'
import navigateUtil from '@/util/navigateUtil.js'
import {toErrPageFunc} from '@/util/toErrorPageUtil.js'

const vdata = reactive({
	primaryColor: ''
})

onLoad(() => {
	vdata.primaryColor = theme.changeColors()
})

function scanQrcFunc() {
	uni.scanCode({
		success({ result }) {
			if (result.includes("pages/hub/lite") || result.includes("pages/hub/default")) {
				navigateUtil.to('/pages/hub/lite', { q: result, isNeedParseQrc: true })
			}else {
				return toErrPageFunc('不支持的二维码类型！');
			}
		}
	})
}
const toPayMember =()=>	navigateUtil.to('/pages/payway/index')

</script>

<style lang="scss">
	.content {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		 
		.content-top-bg {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			width: 100%;
			height: 212rpx;
			border-radius: 0 0 30rpx 30rpx;
			z-index: 0;
		}
	}
	
	.tips {
		position: relative;
		width: 650rpx;
		margin-top: 20rpx;
		border-radius: 30rpx;
		background: #fff;
		z-index: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 70rpx 0;
		
		.tips-title {
			font-weight: bold;
			font-size: 33rpx;
			letter-spacing: 0.04em;
		}
		.tips-image {
			height: 150rpx;
			width: 150rpx;
			padding-top: 100rpx;
		}
		image {
			height: 100%;
			width: 100%;
		}
		.tips-content {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding-top: 70rpx;
			font-size: 27rpx;
			letter-spacing: 0.04em;
			line-height: 51rpx;
			text-align: center;
			color: #000;
		}
	}
	.scan-btn {
		width: 80%;
		margin-top: 100rpx;
		border-radius: 10rpx;
		color: #fff;
	}
	.scan-btn-hover {
		color: #fff;
		opacity: 0.8;
	}
	.payment-no-keyboard {
		width: 500rpx;
		height: 120rpx;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 240rpx;
		margin: 0 auto;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 36rpx;
		color: $uni-text-color-inverse;
		border-radius: 8rpx;
	}
</style>
